<template>
  <div>
  	<shop-header ref="shopHeader">	
			<h2>我的消息</h2>	
		</shop-header>
		<div class="tab-wrapper">
			<div class="tab-nav">
				<div class="tab-nav-item" @click="toggleTabItem('unread')" :class="{ active: type == 'unread' }">
					<span>未读消息</span>
				</div>
				<div class="tab-nav-item" @click="toggleTabItem('read')" :class="{ active: type == 'read' }">
				<span>已读消息</span>
				</div>
			</div>		
		</div>
		<div class="message-wrapper">
			<div class="message-list">
				<router-link @click.native="recordMessage(item._id)" class="message-cell-item" :to="item.target" tag="div" v-for="item in messageList" :key="item.id">
					<h3 class="title">{{ item.title }}</h3>
					<div class="message-flex">
						<span class="datetime">{{ item.createAt }}</span>
						<span class="toView"><i>查看</i> <x-icon type="ios-arrow-right" size="14"></x-icon></span>
					</div>
				</router-link>
			</div>
		</div>
		<no-results v-if="messageList.length === 0"></no-results>
  </div>
</template>

<script>
import ShopHeader from '@/components/public/ShopHeader'
import http from '@/utils/http'
import NoResults from '@/components/public/NoResults'

export default {
	components: {
		ShopHeader,
		NoResults
	},
	data () {
		return {
			type: 'unread',
  		messageList: []
		}
	},
  methods: {
  	toggleTabItem (type) {
  		this.type = type
  		this.messageList = []
  		this.$router.push({ path: '/my/message', query: { type } })
  		this.getMessage(type)
  	},
  	getMessage (type) {
  		http.get('/api/v1/getMessage', { type }, false, res => {
  			if (res.status == 1) {
  				let data = res.data
  				this.messageList = data.map(item => {
  					if (item.goodsId) {
  						item.target = {
  							path: '/goods/detail',
  							query: { id: item.goodsId }
  						}
  					}else {
  						item.target = {
  							path: '/my/message/detail',
  							query: { id: item._id }
  						}
  					}
  					return item
  				})
  			}
  		})
  	},
  	recordMessage (id) {
  		if (this.type === 'read') return
  		http.post('/api/v1/recordMessage', { messageId: id }, false, res => {
  			if (res.status == 1) {
  				// console.log(res)
  			}
  		})
  	}
  },
  mounted () {
  	let that = this
  	this.type = this.$route.query.type
  	this.getMessage(this.type)
		this.$el.onscroll = function () {
  		that.$refs.shopHeader.isShow = false
		}
  },
  watch: {
  	$route () {
  		this.type = this.$route.query.type
  		this.getMessage(this.type)
  	}
  }
}
</script>

<style scoped>
.tab-wrapper {
	height: 42px;
}
.tab-nav {
	position: fixed;
	top: 46px;
	width: 100%;
	max-width: 640px;
	display: flex;
	background: #fff;
	z-index: 98;
}
.tab-nav-item {
	flex: 1;
	text-align: center;
}
.tab-nav-item span {
	position: relative;
	display: inline-block;
	font-size: 14px;
	padding: 10px 0;
	color: #333;
}
.tab-nav-item.active span {
	color: #e93b3d; 
}
.tab-nav-item.active span:after {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: #e93b3d;
}
.message-cell-item {
	background: #fff;
	padding: 15px;
	margin-top: 10px;
}
.message-cell-item:active {
	background: #f8f8f8;
}
.message-cell-item:after {
	bottom: 0;
}
.title {
	font-size: 16px;
	line-height: 20px;
	color: #333;
	overflow: hidden;
	height: 40px;
	margin-bottom: 8px;
	display: -webkit-box;
	text-overflow: ellipsis;
	-webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.message-flex {
	display: flex;
	font-size: 12px;
	color: #999;
	align-items: center;
}
.datetime {
	flex: 1;
}
.toView {
	flex: 0 0 auto;
	color: rgb(5, 217, 120);
}
.toView * {
	font-size: 12px;
	display: inline-block;
	vertical-align: middle;
}
.toView svg {
	fill: rgb(5, 217, 120);
}
</style>
